<template>
  <div class="search-form">
    <el-table :data="[searchForm]" style="width: 100%">
      <el-table-column label="用户名" width="200">
        <template #default="scope">
          <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable />
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="200">
        <template #default="scope">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable />
        </template>
      </el-table-column>
      <el-table-column label="状态" width="200">
        <template #default="scope">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="200">
        <template #default>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const emit = defineEmits(['search', 'reset'])

interface StatusOption {
  value: number
  label: string
}

const statusOptions: StatusOption[] = [
  { value: 1, label: '正常' },
  { value: 0, label: '冻结' }
]

const searchForm = reactive({
  username: '',
  phone: '',
  status: undefined as number | undefined
})

const handleSearch = () => {
  emit('search', { ...searchForm })
}

const handleReset = () => {
  searchForm.username = ''
  searchForm.phone = ''
  searchForm.status = undefined
  emit('reset')
}

defineExpose({
  searchForm
})
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}

:deep(.el-table__header) {
  background-color: #fff;
}

:deep(.el-table__cell) {
  padding: 8px 0;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}
</style> 